<template>
    <view class="createGoods">
        <view class="addTag">
            <input type="text" v-model="keyword" @confirm="addTag" placeholder="添加Tag"
                placeholder-style="color:#ccc;font-size:26rpx;" class="addInput" />
            <view class="tag-list">
                <view v-for="(tag, index) in goodsParams.tags" :key="index" class="tag">
                    <text>{{ tag }}</text>
                    <text class="delete" @click="deleteTag(index)">×</text>
                </view>
            </view>
        </view>
        <view class="date">
            <view class="info">
                <view class="num">
                    <view class="n">预计套数</view>
                    <input type="number" class="n shortInput" v-model="goodsParams.goodsSetNum">
                    <view class="n">套</view>
                </view>
                <view class="price">
                    <view class="n">预计均价</view>
                    <input type="number" class="n shortInput" v-model="goodsParams.averagePrice">
                    <view class="n">元</view>
                </view>
            </view>
            <view class="dateTime">
                <view class="strat n3">
                    <label for="" class="timeLable">开定时间</label>
					<view class="timePicker">
						<uni-datetime-picker v-model="goodsParams.startTime" :border="false" />
					</view>
                </view>
                <view class="pay n3">
                    <label for="" class="timeLable">预计截定时间</label>
					<view class="timePicker">
						<uni-datetime-picker v-model="goodsParams.cutTime" :border="false" />
					</view>
                    
                </view>
				<view class="end n3">
                    <label for="" class="timeLable">预计尾款时间</label>
					<view class="timePicker">
						<uni-datetime-picker v-model="goodsParams.finalPaymentTime" :border="false" />
					</view>
                    
                </view>
            </view>
		</view>
		<view class="detail">
			<view class="title">
				<label for="" class="labelStyle">谷子名称：</label>
				<input type="text" v-model="goodsParams.name" placeholder="请输入谷子名称" style="margin-left: 50rpx;">
			</view>
			<uni-file-picker limit="9" title="详情图" :image-styles="goodsImgStyle" 
			:auto-upload="true" @select="upload($event,0)"></uni-file-picker>
		</view>
		<view class="role">
			<view class="title">
				<label for="" class="labelStyle">角色数量:</label>
				<input type="number" v-model='goodsParams.roleCategoryNum' placeholder="请输入角色数量" style="margin-left: 30rpx;" @blur="createRole">
			</view>
			<view class="rolesPrice">
				<!-- <view class="">
					调价
				</view> -->
				<view class="roles">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
							<view class="roleItem" v-for="(role,index) in goodsParams.goodsRoleDTOList" :key="index">
								<view class="roleName">
									<input v-model="role.name" type="text" placeholder="请输入角色名" placeholder-style="color:#ccc" />
								</view>
								<view class="rolePrice">
										<uni-number-box v-model="role.price" background="#fff"/>
								</view>
							</view>			
					</scroll-view>
					
				</view>
			</view>
		</view>
		<view class="cover">
			<uni-file-picker limit="2" title="上传付款码" :image-styles="payCodeStyle"
			:auto-upload="false" @select="upload($event,2)" ></uni-file-picker>
			<uni-file-picker limit="1" title="上传封面图片(推荐调价图)" :imageStyles="coverStyles" 
			:auto-upload="false" @select="upload($event,1)"></uni-file-picker>
		</view>
		
		<button class="btn" @click="goodsUpload">开谷</button>
	</view>
</template>

<script>
import {openGoods} from '@/api/goods.js'
import {uploadImg} from '@/api/user.js'
export default {
	onShow(){
		let pages=getCurrentPages()
		this.goodsParams.groupId=pages[pages.length-1].options.groupId
	},
    data() {
        return {
			goodsParams:{
				name:'',
				groupId:null,
				tags:[],
				cover:'',
				detailImgs:[],
				goodsSetNum:null,
				averagePrice:null,
				roleCategoryNum:null,
				goodsRoleDTOList:[],
				finalPaymentTime:'',
				startTime:'',
				cutTime:'',
				payCode:[],
			},
            keyword: '',
			imgArr:[
				{
					locationCode:5,
					imgType:'detailImgs'
				},
				{
					locationCode:6,
					imgType:'cover'
				},
				{
					locationCode:6,
					imgType:'payCode'
				},
			],
			goodsImgStyle:{
				width:'200rpx',
				height:'200rpx'
			},
			coverStyles: {
			    width: '730rpx',
			    height: '416rpx',
			},
			payCodeStyle:{
				width: '200rpx',
				height: '300rpx',
			}
        }
    },
    methods: {
        addTag() {
            if (this.keyword.trim() !== '') {
                this.goodsParams.tags.push(this.keyword);
                this.keyword = ''; // 清空输入框
            }
        },
        deleteTag(index) {
            this.goodsParams.tags.splice(index, 1);
        },
		createRole(e){
			const count = this.goodsParams.roleCategoryNum;
			this.goodsParams.goodsRoleDTOList = []; 
			for (let i = 0; i < count; i++) {
				this.goodsParams.goodsRoleDTOList.push({ name: '' ,price:this.goodsParams.averagePrice})
			}
		},
		upload(e,id) {
			const tempFilePaths = e.tempFilePaths;
			let locationCode=this.imgArr[id].locationCode
			let img=tempFilePaths[0]
			// let imgType=this.imgArr[id].imgType
			uploadImg(locationCode, img).then(res=>{
				let url=JSON.parse(res.data).data
				if(id==0){
					this.goodsParams.detailImgs.push(url)
				}else if(id==1){
					this.goodsParams.cover=url
				}
				else {
					this.goodsParams.payCode.push(url)
				}
			})
		},
		goodsUpload(){
			console.log(this.goodsParams)
			let that=this
			let errorNum=0
			console.log(Object.keys(that.goodsParams))
			Object.keys(that.goodsParams).forEach(function(key) {
				if (that.goodsParams[key]==='') {
					uni.showToast({
						title:'请输入完整谷子信息',
						icon:'none'
					})
					errorNum=errorNum+1
				}
			});
			console.log(this.goodsParams);
			if(errorNum===0){
				openGoods(this.goodsParams).then(res=>{
					if(res.data.code==200){
						uni.navigateTo({
							url:`./goodsSuccess?goodsId=${res.data.data}`
						})
					}else{
						uni.showToast({
							title:`${res.data.message}`,
							icon:'none'
						})
					}
				})
			}
			
		},
    }
}
</script>

<style scoped>
.createGoods {
    background-color: #e3f1f778;
    overflow: hidden;
}
.addTag {
    padding: 20rpx;
    /* margin: 20rpx auto; */
    margin-bottom: 15rpx;
    font-size: 26rpx;
    background-color: #fff;
}

.addInput {
    padding: 10rpx 20rpx;
    border: 1rpx solid #8DC7DF;
	border-radius: 45rpx;
}


.tag-list {
    width: 90%;
    /* margin: 0 auto; */
}

.tag {
    display: inline-block;
    height: 60rpx;
    padding: 0 16rpx;
    margin: 14rpx 9rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    border: 1px solid #8DC7DF;
    border-radius: 30rpx;
}

.delete {
    padding: 0 12rpx;
    font-size: 26rpx;
    color: #999999;
}

/* 第二板块 */
.labelStyle{
	width: 180rpx;
}
.date {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 340rpx;
    padding: 10rpx;
    font-size: 28rpx;
    background-color: #fff;
    margin-bottom: 22rpx;
}

.date .info {
    flex: 1;
    display: flex;
    align-items: center;
	margin-left: 20rpx;
}

.info .num,
.info .price {
    flex: 1;
    display: flex;
	align-items: center;
}

.info .n {
    flex: 1;
    /* text-align: center; */
}

.date .dateTime {
    flex: 3;
    display: flex;
    flex-direction: column;
    /* margin: 0 30rpx; */
}

.shortInput {
	text-align: center;
    border-bottom: 1px solid #ccc;
}

.dateTime .n3 {
    flex: 1;
    display: flex;
}

.timeLable {
	flex: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
	margin-left: 20rpx;
}
.timePicker{
	flex:3;
	padding:0 24rpx 0 12rpx;
}
.detail{
	width: 100%;
	padding:20rpx 0 20rpx 20rpx;
	font-size: 28rpx;
	background-color: #fff;
	margin-bottom:20rpx;
}
/* 第三板块 */
.title{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	margin-bottom:10rpx;
}
/* 第四板块 */
.role{
	/* background-color: #fff; */
	padding:20rpx 20rpx 0 20rpx;
	margin-bottom: 20rpx;
}

.rolesPrice{
	font-size: 30rpx;
}
.roles{
	padding-top:20rpx;
	/* display: flex; */
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.roleItem{
	display: inline-block;
	width: 200rpx;
	height: 210rpx;
	margin-right: 20rpx;
}
.roleItem .roleName{
	display: flex;
	align-items: center;
	text-align: center;
	width: 200rpx;
	height: 140rpx;
	margin-bottom: 10rpx;
	background-color: #fff;
}
.roleItem .rolePrice{
	display: flex;
	align-items: center;
	width: 200rpx;
	height: 70rpx;
	/* background-color: #fff; */
}


/* 第五板块 */
.cover{
	padding: 20rpx 0 20rpx 20rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}
.btn{
	width: 90%;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	background-color: #c0e9ff96;
	border: 1rpx solid #75BEFA;
	margin: 20rpx auto;
}
</style>